*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --purple: #534AB7;
      --purple-light: #7f77dd;
      --purple-dim: #AFA9EC;
      --teal: #1D9E75;
      --teal-light: #5DCAA5;
      --amber: #EF9F27;
      --dark: #1a1a2e;
      --darker: #12122B;
      --card-bg: #1f1f3a;
      --border: rgba(255,255,255,0.07);
      --text: #e8e8f0;
      --muted: #888;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Lato', sans-serif;
      background: var(--darker);
      color: var(--text);
      min-height: 100vh;
    }

    /* ── HEADER ── */
    header {
      background: var(--dark);
      padding: 3rem 3rem 2.5rem;
      position: relative;
      overflow: hidden;
      border-bottom: 0.5px solid var(--border);
    }

    .blob {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(2px);
    }
    .blob1 {
      width: 340px; height: 340px;
      background: radial-gradient(circle, #7f77dd44, transparent 70%);
      top: -100px; right: -60px;
      animation: float 8s ease-in-out infinite;
    }
    .blob2 {
      width: 260px; height: 260px;
      background: radial-gradient(circle, #1d9e7533, transparent 70%);
      bottom: -80px; left: 40px;
      animation: float 10s ease-in-out infinite reverse;
    }
    .blob3 {
      width: 180px; height: 180px;
      background: radial-gradient(circle, #EF9F2722, transparent 70%);
      top: 30px; left: 45%;
      animation: float 7s ease-in-out infinite 2s;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-18px); }
    }

    .header-inner {
      position: relative;
      z-index: 2;
      max-width: 900px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 2rem;
    }

    .badge {
      display: inline-block;
      font-family: 'Syne', sans-serif;
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 99px;
      background: #7f77dd18;
      border: 0.5px solid #7f77dd66;
      color: var(--purple-dim);
      margin-bottom: 1.2rem;
      animation: fadeDown .6s ease both;
    }

    .hero-name {
      font-family: 'Syne', sans-serif;
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800;
      color: #fff;
      line-height: 1.05;
      margin-bottom: .4rem;
      animation: fadeDown .6s ease .1s both;
    }

    .hero-name span {
      background: linear-gradient(135deg, var(--purple-dim), var(--teal-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-sub {
      font-size: 14px;
      color: var(--muted);
      font-weight: 300;
      margin-bottom: 1.4rem;
      letter-spacing: .04em;
      animation: fadeDown .6s ease .2s both;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      animation: fadeDown .6s ease .3s both;
    }

    .tag {
      font-size: 11px;
      padding: 4px 12px;
      border-radius: 99px;
      font-weight: 400;
    }
    .tag-purple { background: #3C348922; color: #ccc; border: 0.5px solid #534AB766; }
    .tag-teal   { background: #0F6E5618; color: var(--teal-light); border: 0.5px solid #1D9E7555; }

    .header-stats {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      align-items: flex-end;
      animation: fadeLeft .7s ease .4s both;
    }

    .stat { text-align: right; }
    .stat-num {
      font-family: 'Syne', sans-serif;
      font-size: 38px;
      font-weight: 800;
      line-height: 1;
      background: linear-gradient(135deg, var(--purple-dim), var(--teal-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .stat-label {
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeLeft {
      from { opacity: 0; transform: translateX(14px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── MAIN ── */
    main {
      max-width: 900px;
      margin: 0 auto;
      padding: 2.5rem 3rem 4rem;
    }

    .section-title {
      font-family: 'Syne', sans-serif;
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 1.2rem;
      display: flex;
      align-items: center;
      gap: .75rem;
    }
    .section-title::after {
      content: '';
      flex: 1;
      height: 0.5px;
      background: var(--border);
    }

    /* About */
    .about {
      border-radius: 14px;
      padding: 1.25rem 1.5rem;
      border: 0.5px solid #1D9E7530;
      background: #0F6E560e;
      margin-bottom: 2.5rem;
      font-size: 14px;
      color: #aaa;
      line-height: 1.8;
      animation: fadeUp .7s ease .3s both;
    }
    .about strong { color: var(--teal-light); font-weight: 500; }

    /* Project card */
    .pcard {
      border-radius: 14px;
      padding: 1.5rem;
      border: 0.5px solid var(--border);
      background: var(--card-bg);
      position: relative;
      overflow: hidden;
      margin-bottom: 2.5rem;
      animation: fadeUp .7s ease .4s both;
      transition: border-color .25s, transform .25s;
    }
    .pcard:hover { border-color: #534AB766; transform: translateY(-3px); }

    .pcard-accent {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 3px;
      background: linear-gradient(90deg, var(--purple), var(--teal));
    }

    .pcard-label {
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--purple-dim);
      margin-bottom: .6rem;
    }

    .pcard-title {
      font-family: 'Syne', sans-serif;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: .7rem;
      color: #fff;
    }

    .pcard-desc {
      font-size: 13px;
      color: #999;
      line-height: 1.8;
      max-width: 620px;
    }

    .tech-pills {
      display: flex;
      gap: .4rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }
    .tech {
      font-size: 11px;
      padding: 4px 12px;
      border-radius: 99px;
      border: 0.5px solid #534AB755;
      background: #3C348912;
      color: var(--purple-dim);
    }

    .pcard-num {
      position: absolute;
      bottom: .75rem; right: 1.25rem;
      font-family: 'Syne', sans-serif;
      font-size: 72px;
      font-weight: 800;
      opacity: .04;
      color: #fff;
      line-height: 1;
      user-select: none;
    }

    /* Skills */
    .skills-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: .6rem;
      margin-bottom: 2.5rem;
      animation: fadeUp .7s ease .5s both;
    }

    .skill {
      border-radius: 10px;
      padding: .75rem 1rem;
      border: 0.5px solid var(--border);
      background: var(--card-bg);
      transition: border-color .2s;
    }
    .skill:hover { border-color: #534AB755; }

    .skill-name {
      font-family: 'Syne', sans-serif;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--text);
    }

    .skill-bar {
      height: 3px;
      border-radius: 99px;
      background: rgba(255,255,255,0.06);
      overflow: hidden;
    }
    .skill-fill {
      height: 100%;
      border-radius: 99px;
      animation: grow 1s ease 1s both;
    }

    @keyframes grow {
      from { width: 0 !important; }
    }

    /* Footer */
    footer {
      background: var(--dark);
      border-top: 0.5px solid var(--border);
      padding: 1.5rem 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .footer-left p {
      font-size: 12px;
      color: #555;
      margin-bottom: .2rem;
    }
    .footer-left span { color: var(--purple-dim); }

    .footer-cta {
      font-family: 'Syne', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      padding: 10px 22px;
      border-radius: 99px;
      background: linear-gradient(135deg, var(--purple), var(--teal));
      color: #fff;
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: opacity .2s, transform .2s;
    }
    .footer-cta:hover { opacity: .85; transform: translateY(-1px); }

    /* Responsive */
    @media (max-width: 640px) {
      header { padding: 2rem 1.5rem; }
      .header-inner { grid-template-columns: 1fr; }
      .header-stats { flex-direction: row; align-items: flex-start; }
      main { padding: 2rem 1.5rem 3rem; }
      footer { padding: 1.25rem 1.5rem; flex-direction: column; align-items: flex-start; }
    }